RWD須知：

1. 網頁預設就有 RWD ，只是不一定是我們想要的。

2. 如果 RWD 發生問題，絕對是程式碼有設定錯誤，不要怪 CSS 爛。

教學重點：

1. 物件長寬盡量使用 % 來取代絕對單位（px）。

2. 盡量不要設定高度（height），如果要固定高度最好使用 max-height 或 min-height。

3. font-size margin padding 等大小屬性盡量使用 em 或 rem ，而少用 px（下面會解釋）。

筆記：

% 、 px 、 em 、 rem 的差別

• %：相對單位，相對於父層元素的百分比。
• px：絕對單位，代表螢幕的每一個 pixel。
• em：相對單位，相對於父層元素的倍數。
• rem：相對單位，相對於根元素或是 HTML 的倍數。

px 跟 % 比較常看到也比較好理解，em 跟 rem 一開始看到會不太知道要怎麼用，舉幾個例子來方便理解。

<!--HTML-->
<div class='em-parent'>
    <div class='em-child'>
      <h1>em</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque laboriosam suscipit sed corporis in fugiat at amet distinctio? Earum placeat, alias est assumenda repellendus ipsam non eum. Nobis, consectetur corporis.</p>
    </div>
  </div>
  <div class='rem-parent'>
    <div class='rem-child'>
      <h1>rem</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque laboriosam suscipit sed corporis in fugiat at amet distinctio? Earum placeat, alias est assumenda repellendus ipsam non eum. Nobis, consectetur corporis.</p>
    </div>
  </div>

/*CSS*/
.em-parent {
  font-size: 1.5em;
}
.em-child {
  font-size: 1em;
}
.rem-parent {
  font-size: 1.5rem;
}
.rem-child {
  font-size: 1rem;
}

可以看到雖然父層都設 30px ，子層都設 1 倍，但是因為 em 是參照父層的倍數，所以子層的文字都會是父層的一倍，也就是 30px 。

而 rem 參照的根元素的倍數，也就是 HTML 或者有自訂 :root ，預設的情況下根元素的 size 會是 16px，所以子元素才會沒有變大，維持 16px 。

使用 em 及 rem 的好處

除了在排版上可以依照倍數去調整大小之外，在控制元素距離（padding、margin）也很方便，不過要注意的是將 em 使用在 padding 及 margin 時，參照的是該層元素的大小，這點要特別注意！

padding：

• 使用 em 時，改變當層 font-size ，padding 也會跟著變動（參照當層元素），整體比例不會變。
• 使用 rem 時，改變當層 font-size ，padding 不會跟著變動（參照根元素），整體比例會跑掉。

margin：

• 使用 em 時，改變當層 font-size ，margin 也會跟著變動（參照當層元素），間隔距離會變動。
• 使用 rem 時，改變當層 font-size ，margin 不會跟著變動（參照根元素），間隔距離維持不變。

總結：

• 多使用 em 、 rem 、 %。
• padding 推薦使用 em。
• margin 推薦使用 rem。

參考